<template>
  <div class="addGame">
    <el-dialog
      title="添加新游戏"
      :close-on-click-modal="false"
      :visible.sync="isVisible"
      @close="closeDialog"
    >
      <el-form
        :model="formdata"
        :rules="rules"
        ref="formdata"
        class="demo-ruleForm"
        label-width="120px"
      >
        <el-form-item label="游戏名称" prop="gameName">
          <el-input
            type="text"
            placeholder="请输入游戏名称"
            v-model="formdata.gameName"
            maxlength="25"
            show-word-limit
            autocomplete="off"
            :disabled="namedisable"
          ></el-input>
        </el-form-item>
        <el-form-item label="游戏版本" prop="classify">
          <el-radio-group v-model="formdata.classify" @change="getlinkGame">
            <el-radio label="2">双端</el-radio>
            <el-radio label="3">安卓</el-radio>
            <el-radio label="4">IOS</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="关联游戏"
          prop="relationGameId"
          v-if="formdata.classify != '2'"
        >
          <el-select
            v-model="formdata.relationGameId"
            placeholder="输入游戏名搜索"
            filterable
            @change="relationChange"
          >
            <el-option
              v-for="item in linkgameOption"
              :key="item.id"
              :label="item.gameName"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-button circle class="iconAlert" @click="relationClain"
            >?</el-button
          >
        </el-form-item>
        <el-form-item
          label="游戏认证物料"
          prop="certificateUrl"
          v-if="formdata.relationGameId == ''"
        >
          <el-upload
            class="upload-demo"
            :action="action"
            :data="data"
            :on-remove="handleRemove"
            :before-upload="beforeupload"
            :limit="1"
            :on-success="handlesuccess"
            accept=".zip"
            :on-exceed="handleExceed"
          >
            <el-button size="small" plain>点击上传</el-button>
          </el-upload>
          <el-button circle class="iconAlert" @click="gameMatter">?</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('formdata')"
          >确 定</el-button
        >
        <el-button @click="isVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addgame, uploadFile, getlinkGame } from "@/api/gameManage";
export default {
  inject: ["reload"],
  data() {
    return {
      isVisible: this.isShow,
      formdata: {
        gameName: "",
        classify: "2",
        certificateUrl: "",
        relationGameId: "",
      },
      linkgameOption: [],
      rules: {
        gameName: [
          { required: true, message: "请输入游戏名称", trigger: "blur" },
        ],
        classify: [
          { required: true, message: "请选择分类标签", trigger: "blur" },
        ],
        certificateUrl: [
          { required: true, message: "请添加游戏认证物料", trigger: "blur" },
        ],
      },
      action: "https://cpop.zaoyx.com/api/v1/adminrebate/uploadFile",
      data: {
        fileType: "zip",
      },
      namedisable: false,
    };
  },
  props: {
    isShow: Boolean,
    dialogRow: Array,
  },
  methods: {
    closeDialog() {
      this.$emit("closeDialog");
    },
    // 表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const para = Object.assign({}, this.formdata);
          addgame(para)
            .then((res) => {
              this.$message({
                message: "创建成功！",
                type: "success",
              });
              setTimeout(() => {
                this.reload();
              }, 20);
            })
            .catch((error) => {});
          this.isVisible = false;
        }
      });
    },
    handleRemove(file) {
      this.formdata.certificateUrl = "";
    },
    beforeupload(file) {
      const isZip = file.name.endsWith(".zip");
      const isLt15M = file.size / 1024 / 1024 < 15;

      if (!isZip) {
        this.$message.error("请选择zip文件");
      }
      if (!isLt15M) {
        this.$message.error("上传文件大小不能超过 15MB");
      }
      return isZip && isLt15M;
    },
    handlesuccess(file, fileList) {
      this.formdata.certificateUrl = file.data.fileSavePath;
    },
    handleExceed() {
      this.$message.warning(`当前限制可选择 1 个文件`);
    },
    // 游戏认证物料
    gameMatter() {
      this.$alert(
        "上传文件为zip压缩文件，文件最大15M；</br>内容包括txt对接文档，游戏版号截图，转件著作权截图，转件著作权授权书</br>注：（传奇游戏，火影忍者，龙珠，海贼王等IP授权书）</br>图片要求尺寸为 1080x1920px ，格式必须为 JPG 或 PNG，最大3M；</br>该版号资料需对应此创建的游戏，图片有效内容尽量控制在安全区域 948x1768 内。",
        "游戏认证物料",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    relationClain() {
      this.$alert(
        "关联游戏通常为同游戏的安卓和ios两个版本之间相互关联，关联后任意一端编辑内容（版号资质、游戏物料、礼包、开服表、活动等相关内容都会同步共享）<br>正常双端一起上线的都建议直接以双端形式创建（创建双端后自动相互关联），特殊情况一端先发或者只有一端的才建议以单端形式创建，后续需要双端同步的情况下选择创建另外一端，然后再相互创建关联达到内容同步！",
        "关联游戏",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    // 获取关联游戏
    getlinkGame(val) {
      this.formdata.relationGameId = "";

      if (val != 2) {
        // 将select选择框置空
        let classify;
        if (val == 3) {
          classify = 4;
        } else {
          classify = 3;
        }
        // 发请求
        const para = Object.assign({}, { classify });
        getlinkGame(para)
          .then((res) => {
            this.linkgameOption = res.data.list;
          })
          .catch((error) => {});
      }
      this.formdata.gameName = "";
      this.namedisable = false;
    },
    // 关联游戏选择
    relationChange(oId) {
      let obj = this.linkgameOption.map((o) => Object.assign({}, o));
      if (oId != 0) {
        this.namedisable = true;
        obj.map((item) => {
          if (item.id == oId) {
            var str = item.gameName.slice(0, item.gameName.lastIndexOf("("));
            this.formdata.gameName = str;
          }
        });
      }
    },
  },
};
</script>
<style lang="scss">
.addGame {
  .el-input {
    width: 400px;
  }
  .el-select .el-input {
    width: 200px;
  }
  .el-form-item__label {
    padding: 0 20px 0 0;
  }
  .el-upload {
    .el-button {
      padding: 10px 77px;
      color: #a5a4bf;
      border: 1px solid #a5a4bf;
      font-size: 12px;
    }
  }
  .el-form-item__content {
    margin-bottom: 20px;
    .iconAlert {
      position: absolute;
      padding: 0;
      top: 5px;
      left: 230px;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
    }
    .iconAlert,
    .el-input__inner {
      color: #a5a4bf;
      border: 1px solid #a5a4bf;
    }
    .el-input__inner::placeholder {
      color: #a5a4bf;
    }
  }
  .el-dialog__wrapper .el-input.is-disabled .el-input__inner {
    border: 1px solid #a5a4bf;
    background-color: #f5f7fa;
    cursor: not-allowed;
  }
}
</style>